<!--author:王佳欣-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>发布题目</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            /*导航栏样式*/
            .navbar {
                background-color: #222;
            }
            #daohang {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: transparent;
            }
            li {
                height: 40px;
                padding-left: 0;
                padding-right: 20px;
                font-size: 15px;
                float: left;
            }
            li a {
                padding: 10px;
                display: block;
                color: white;
                text-align: center;
                /*padding: 14px 16px;*/
                text-decoration: none;
            }
            /*!*鼠标移动到选项上修改背景颜色 *!*/
            li a:hover {
                background-color: #111;
            }
            .active {
                background-color: black;
            }

            .col-sm-new {
                border-radius: 15px;
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%; }

            .dropbtn {
                background-color: transparent;
                color: white;
                padding-left: 35px;
                padding-right: 35px;
                font-size: 16px;
                border: none;
                cursor: pointer;
            }
            .dropdown {
                position: relative;
                display: inline-block;text-align: center;
            }
            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                width: 100%;;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }
            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }
            .dropdown-content a:hover {
                background-color: #f1f1f1
            }
            .dropdown:hover .dropdown-content {
                display: block;
            }
            .dropdown:hover .dropbtn {
                background-color: transparent;
            }
            #submitButton{
                width: 150px;
                background-color: #5bc0de;
                border: 1px solid #3ed4e8;
            }
        </style>
    </head>
    <body>

        <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
            <a class="navbar-brand font-weight-bold" href="#">发布题目 </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="topMenu">
                <ul class="navbar-nav ml-auto" >
                    <div style="margin:5px" id="javaoj">
                        <a style="color: white" href="login.html" onclick="logout()"> 退出登录</a>
                        <div class="dropdown">
                            <button class="dropbtn">设置</button>
                            <div class="dropdown-content">
                                <a href="updateInfo.html">修改个人信息</a>
                                <a href="updatePassword.html">修改密码</a>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </nav>

        <!--components-->
        <section class="my-5 pt-5">
            <div class="container">
                <div class="row mt-4">
                    <div class="col-sm-new pb-4">
                        <div class="form-group">
                            <label for="title">标题</label>
                                <textarea class="form-control" id="title" style="width: 100%; height: 50px;"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-sm-new pb-4">
                        <div class="form-group">
                            <label for="degree">难度</label>
                            <select class="form-control" id="degree" style="width: 100%; height: 40px;">
                                <option value="简单">简单</option>
                                <option value="中等">中等</option>
                                <option value="困难">困难</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-sm-new pb-4">
                        <div class="form-group">
                            <label for="description">题目描述</label>
                            <textarea class="form-control" id="description" style="width: 100%; height: 200px;"></textarea>
                            <label for="inputDescription">输入描述</label>
                            <textarea class="form-control" id="inputDescription" style="width: 100%; height: 100px;"></textarea>
                            <label for="outputDescription">输出描述</label>
                            <textarea class="form-control" id="outputDescription" style="width: 100%; height: 100px;"></textarea>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row mt-4">
                        <div class="col-sm-new pb-4">
                            <div class="form-group">
                                <div style="display: inline-block;margin-right: 200px;margin-left: 300px">
                                    <label for="memoryLimit">内存限制</label>
                                    <div>
                                        <textarea class="form-control" id="memoryLimit" style="width: 80px; height: 50px;display: inline-block"></textarea>
                                        <p style="float: right;margin-top:5px;margin-left: 20px;font-size: 20px">MB</p>
                                    </div>
                                </div>
                                <div style="display: inline-block;margin-right: 200px">
                                    <label for="timeLimit">时间限制</label>
                                    <div>
                                        <textarea class="form-control" id="timeLimit" style="width: 80px; height: 50px;display: inline-block"></textarea>
                                        <p style="float: right;margin-top:5px;margin-left: 20px;font-size: 20px">S</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-sm-new pb-4">
                            <div class="form-group">
                               <div style="display: inline-block;margin-right: 100px">
                                   <label for="input1">输入样例1</label>
                                   <textarea class="form-control" id="input1" style="width: 480px; height: 50px;"></textarea>
                               </div>
                                <div style="display: inline-block">
                                    <label for="output1">输出样例1</label>
                                    <textarea class="form-control" id="output1" style="width: 480px; height: 50px;"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div style="display: inline-block;margin-right: 100px">
                                    <label for="input1">输入样例2</label>
                                    <textarea class="form-control" id="input2" style="width: 480px; height: 50px;"></textarea>
                                </div>
                                <div style="display: inline-block">
                                    <label for="output1">输出样例2</label>
                                    <textarea class="form-control" id="output2" style="width: 480px; height: 50px;"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div style="display: inline-block;margin-right: 100px">
                                    <label for="input1">输入样例3</label>
                                    <textarea class="form-control" id="input3" style="width: 480px; height: 50px;"></textarea>
                                </div>
                                <div style="display: inline-block">
                                    <label for="output1">输出样例3</label>
                                    <textarea class="form-control" id="output3" style="width: 480px; height: 50px;"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div style="display: inline-block;margin-right: 100px">
                                    <label for="input1">输入样例4</label>
                                    <textarea class="form-control" id="input4" style="width: 480px; height: 50px;"></textarea>
                                </div>
                                <div style="display: inline-block">
                                    <label for="output1">输出样例4</label>
                                    <textarea class="form-control" id="output4" style="width: 480px; height: 50px;"></textarea>
                                </div>
                                <div class="form-group">
                                    <div style="display: inline-block;margin-right: 100px">
                                        <label for="input1">输入样例5</label>
                                        <textarea class="form-control" id="input5" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                    <div style="display: inline-block">
                                        <label for="output1">输出样例5</label>
                                        <textarea class="form-control" id="output5" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div style="display: inline-block;margin-right: 100px">
                                        <label for="input1">输入样例6</label>
                                        <textarea class="form-control" id="input6" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                    <div style="display: inline-block">
                                        <label for="output1">输出样例6</label>
                                        <textarea class="form-control" id="output6" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div style="display: inline-block;margin-right: 100px">
                                        <label for="input1">输入样例7</label>
                                        <textarea class="form-control" id="input7" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                    <div style="display: inline-block">
                                        <label for="output1">输出样例7</label>
                                        <textarea class="form-control" id="output7" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div style="display: inline-block;margin-right: 100px">
                                        <label for="input1">输入样例8</label>
                                        <textarea class="form-control" id="input8" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                    <div style="display: inline-block">
                                        <label for="output1">输出样例8</label>
                                        <textarea class="form-control" id="output8" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div style="display: inline-block;margin-right: 100px">
                                        <label for="input1">输入样例9</label>
                                        <textarea class="form-control" id="input9" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                    <div style="display: inline-block">
                                        <label for="output1">输出样例9</label>
                                        <textarea class="form-control" id="output9" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div style="display: inline-block;margin-right: 100px">
                                        <label for="input1">输入样例10</label>
                                        <textarea class="form-control" id="input10" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                    <div style="display: inline-block">
                                        <label for="output1">输出样例10</label>
                                        <textarea class="form-control" id="output10" style="width: 480px; height: 50px;"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="float:right"><button type="button" class="btn btn-primary" id="submitButton">提交</button></div>
                </div>
                </div>
        </section>

        <!--footer-->
        <section class="py-5 bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                        <p class="pt-2 text-muted">
                            &copy; by 别叫我们组
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <script src="js/jquery.min.js"></script>
        <script>
            //退出登录的实现
            var userId = localStorage.getItem("userId");
            //获取用户登录信息，获取失败则返回登录页面
            function getUser(){
                if (userId==null){
                    location.assign("login.html");
                }
            }
            function logout(){
                localStorage.clear();
            }
            getUser();

            //点击提交按钮与数据库连接新增题目
            let button=document.querySelector("#submitButton");
            button.onclick=function(){
                let inputList = {
                    "input1":$("#input1").val(),
                    "input2":$("#input2").val(),
                    "input3":$("#input3").val(),
                    "input4":$("#input4").val(),
                    "input5":$("#input5").val(),
                    "input6":$("#input6").val(),
                    "input7":$("#input7").val(),
                    "input8":$("#input8").val(),
                    "input9":$("#input9").val(),
                    "input10":$("#input10").val(),
                }
                let outputList = {
                    "output1":$("#output1").val(),
                    "output2":$("#output2").val(),
                    "output3":$("#output3").val(),
                    "output4":$("#output4").val(),
                    "output5":$("#output5").val(),
                    "output6":$("#output6").val(),
                    "output7":$("#output7").val(),
                    "output8":$("#output8").val(),
                    "output9":$("#output9").val(),
                    "output10":$("#output10").val(),
                }
                let question={
                    "title" : $("#title").val(),
                    "description": $("#description").val(),
                    "inputDescription":$("#inputDescription").val(),
                    "outputDescription":$("#outputDescription").val(),
                    "memoryLimit":$("#memoryLimit").val(),
                    "timeLimit":$("#timeLimit").val(),
                    "inputList":JSON.stringify(inputList),
                    "outputList":JSON.stringify(outputList),
                    //难度
                    "degree": $("#degree").val(),
                };
                console.log(question);
                var obj = JSON.parse(question.inputList);
                console.log(obj);
                if (isEmpty(question.title)){
                    alert("请确保题目标题不为空！")
                }else{
                    $.ajax({
                        url:"http://192.168.47.129:8010/admin/publishQuestion",
                        type:"POST",
                        contentType:"application/json; charset=utf-8",
                        data: JSON.stringify(question),
                        success:function(data,status){
                            location.assign("manageQuestion.html");
                        }
                    })
                }
            }

            //判断字符串是否为空的函数 true表示是空字符串
            function isEmpty(name) {
                if(name === '' || name.trim().length === 0){
                    return true;
                }else{
                    return false;
                }
            }

        </script>
    </body>
</html>
